<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
            <!-- 查询 -->
            <div class="query">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="方向">
                        <el-input v-model="formInline.user" placeholder="学习方向"></el-input>
                    </el-form-item>
                    <el-form-item label="课程名">
                        <el-input v-model="formInline.user" placeholder="课程名"></el-input>
                    </el-form-item>
                    <el-form-item label="学生姓名">
                        <el-input v-model="formInline.user" placeholder="学生姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-input v-model="formInline.user" placeholder="时间"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="方向" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type==1">全栈</span>
                        <span v-if="scope.row.type==2">后端</span>
                        <span v-if="scope.row.type==3">前端</span>
                    </template>
                </el-table-column>
                <el-table-column label="课程名" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.course }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="学生姓名" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.stuName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="时间" width="200">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span>{{ scope.row.date }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="备注" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.performance }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="Pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-size="20" layout="total, prev, pager, next" :total="count">
                </el-pagination>
            </div>
            <el-dialog title="编辑" v-model="dialogFormVisible">
                <el-form :model="selectTable">
                    <el-form-item label="课程名称" label-width="100px">
                        <el-input v-model="selectTable.name" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="上课时间" label-width="100px">
                        <el-input v-model="selectTable.description"></el-input>
                    </el-form-item>

                    <!-- <el-form-item label="课程分类" label-width="100px">
                        <el-select v-model="selectIndex" :placeholder="selectMenu.label" @change="handleSelect">
                            <el-option v-for="item in menuOptions" :key="item.value" :label="item.label"
                                :value="item.index">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="备注" label-width="100px">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
                        </el-input>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateFood">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
import headTop from '../components/headTop'
// import { baseUrl, baseImgPath } from '@/config/env'
import { getFoods, getFoodsCount, getMenu, updateFood, deleteFood, getResturantDetail, getMenuById } from '@/api/getData'
export default {
    data() {
        return {
            limit: 20,
            count: 0,
            tableData: [
                {
                    type:'1',
                    course: 'Java',
                    stuName: '张三',
                    date: '2023-2-20',
                    performance: 'Java面向对象'
                },
                {
                    type:'2',
                    course: 'Java',
                    stuName: '李四',
                    date: '2023-2-20',
                    performance: 'Java数组'
                },
                {
                    type:'3',
                    course: 'JavaScript',
                    stuName: '王五',
                    date: '2023-2-20',
                    performance: 'JavaScript数组'
                },
            ],
            formInline: [],
            currentPage: 1,
            selectTable: {},
            dialogFormVisible: false,
            specsFormVisible: false,
            expendRow: [],
        }
    },
    created() {
        // this.restaurant_id = this.$route.query.restaurant_id;
        // this.initData();
    },
    
    components: {
        headTop,
    },
    methods: {
        
        deleteSpecs(index) {
            this.specs.splice(index, 1);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.offset = (val - 1) * this.limit;
        },
        handleEdit(row) {
            this.getSelectItemData(row, 'edit')
            this.dialogFormVisible = true;
        },
        async getSelectItemData(row, type) {
            // const restaurant = await getResturantDetail(row.restaurant_id);
            // const category = await getMenuById(row.category_id)
            // this.selectTable = { ...row, ...{ restaurant_name: restaurant.name, restaurant_address: restaurant.address, category_name: category.name } };

            // this.selectMenu = { label: category.name, value: row.category_id }
            // this.tableData.splice(row.index, 1, { ...this.selectTable });
            // this.$nextTick(() => {
            //     this.expendRow.push(row.index);
            // })
            // if (type == 'edit' && this.restaurant_id != row.restaurant_id) {
            //     this.getMenu();
            // }
        },
        handleSelect(index) {
            this.selectIndex = index;
            this.selectMenu = this.menuOptions[index];
        },
        handleDelete(index, row) {
            
        },
       
    },
}
</script>

<style lang="less" scoped>
@import '../style/mixin';

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.table_container {
    padding: 20px;
}

.Pagination {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}
</style>
